<!-- 登录页 -->
<template>
    <!-- 整体背景 -->
    <div class="login-wrap">
        <!--输入框-->
        <div class="form-wrapper">
            <div class="header">
                快腿，更快一步
            </div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="input-wrapper">
                    <div label="用户名" prop="pass" class="border-wrapper">
                        <input type="text" name="userName" placeholder="userName" v-model="ruleForm.pass" autocomplete="off"
                            class="border-item" />
                    </div>
                    <div label="密码" prop="checkPass" class="border-wrapper">
                        <input type="password" name="password" placeholder="password" v-model="ruleForm.checkPass"
                            class="border-item" autocomplete="off" />
                    </div>
                    <div label="验证码" prop="captcha" class="border-wrapper">
                        <input v-model="ruleForm.captcha" placeholder="验证码" class="border-item" />
                        <span v-html="captcha" @click="handlezhuce()"></span>
                    </div>
                </div>

                <div class="login-form-botton">
                    <p>没有账号？<router-link to="/zhuce">立即注册</router-link></p>
                </div>
                <div class="action">
                    <div class="btn" type="primary" @click="submitForm('ruleForm')">login</div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Axios from '../service/service'
import Cookies from 'js-cookie'
export default {
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            else {
                callback();
            }
        };
        return {
            ruleForm: {
                pass: '',//用户名
                checkPass: '',
                captcha: ''
            },
            rules: {
                pass: [{
                    validator: validatePass,
                    trigger: 'blur'
                }],
                checkPass: [{
                    validator: validatePass2,
                    trigger: 'blur'
                }]
            },
            captcha: ""
        };
    },
    methods: {
        handlezhuce() {
            this.getCaptcha()
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    Cookies.set('username', this.ruleForm.pass)
                    var denglu = await Axios.post('/login', {
                        userName: this.ruleForm.pass,
                        pwd: this.ruleForm.checkPass,
                        captcha: this.ruleForm.captcha
                    })
                    localStorage.setItem('access_token', denglu.data.token);
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    })
                } else {
                    console.log('error submit!!');
                    this.$message.error(
                        '登录失败'
                    );
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleRegister() {
            // 跳转到注册页面
        },
        async getCaptcha() {
            const that = this;
            await Axios.get('/captcha').then(res => {
                that.captcha = res.data;
            })
        }
    },
    mounted() {
        this.getCaptcha();
    },
}
</script>

<style scoped>
.login-wrap {
    height: 1000px;
    font-family: JetBrains Mono Medium;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #0e92b3; */
    background: url('../assets/img/bg2.png');
    background-size: 100% 100%;
}

.form-wrapper {
    width: 300px;
    background-color: rgba(41, 45, 62, 0.8);
    color: #fff;
    border-radius: 2px;
    padding: 50px;
}

.form-wrapper .header {
    text-align: center;
    font-size: 35px;
    text-transform: uppercase;
    line-height: 100px;
}

.form-wrapper .input-wrapper input {
    background-color: rgb(41, 45, 62);
    border: 0;
    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    outline: none;
}

.form-wrapper .input-wrapper input::placeholder {
    text-transform: uppercase;
}

.form-wrapper .input-wrapper .border-wrapper {
    background-image: linear-gradient(to right, #e8198b, #0eb4dd);
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-wrapper .input-wrapper .border-wrapper .border-item {
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    border-radius: 30px;
}

.form-wrapper .action {
    display: flex;
    justify-content: center;
}

.form-wrapper .action .btn {
    width: 60%;
    text-transform: uppercase;
    border: 2px solid #0e92b3;
    text-align: center;
    line-height: 50px;
    border-radius: 30px;
    cursor: pointer;
}

.form-wrapper .action .btn:hover {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.form-wrapper .icon-wrapper {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    border-top: 1px dashed rgb(146, 146, 146);
    padding: 20px;
}

.form-wrapper .icon-wrapper i {
    font-size: 20px;
    color: rgb(187, 187, 187);
    cursor: pointer;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 20px;
}

.form-wrapper .icon-wrapper i:hover {
    background-color: #0e92b3;
}
</style>